<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <div id="app"></div>
    <template id="root">
        <div class="tp">
            <div class="main">
                <!--标题-->
                <div class="boxhd">
                    <h2 class="title">
                        手机
                    </h2>
                    
                    <div class="more">
                        <a class="more-link" href="#">查看全部<img class="moreiconfont" src="img/more.png" width="20px" height="20px"></a>
                        
                    </div>
                    
                </div>
                <!--标题 end-->
                <!--内容-->
                <div class="picList">
                    <div class="bigPic">
                        <img src="img/ad1.png" width="234px" height="614">
                    </div>
                    <!-- <div class="picUl"> -->
                        <ul class="bricklist">
                            <li class="lis" v-for="v,i in phoneList" :key="v.pid">
                                <img :src="v.img" class="figureimg">
                                <h3 class="title2">{{v.title}}</h3>
                                <p class="desc">{{v.des}}</p>
                                <p class="price">{{v.price}}</p>
                            </li>
                        </ul>
                    <!-- </div> -->
                </div>
                <!--内容 end-->
            </div>
        </div>
        
    </template>
    
    <script>
        const app = Vue.createApp ({
            template:'#root',
            data(){
                return {
                   phoneList:[
                    {pid:'01',img:'img/phone1.png',title:'Redmi K50 电竞版',des:'全线拉满的冷血旗舰',price:'3299 元起'},
                    {pid:'02',img:'img/phone2.png',title:'Xiaomi 12 Pro',des:'全线拉满的冷血旗舰',price:'3299 元起'},
                    {pid:'03',img:'img/phone3.png',title:'Xiaomi 12',des:'全线拉满的冷血旗舰',price:'3299 元起'},
                    {pid:'04',img:'img/phone4.png',title:'Xiaomi 12X',des:'全线拉满的冷血旗舰',price:'3299 元起'},
                    {pid:'05',img:'img/phone5.png',title:'Xiaomi 11 青春活力版',des:'全线拉满的冷血旗舰',price:'3299 元起'},
                    {pid:'06',img:'img/phone6.png',title:'Redmi Node 11 PRo系列',des:'全线拉满的冷血旗舰',price:'3299 元起'},
                    {pid:'07',img:'img/phone7.png',title:'Redmi Node 11 5G',des:'全线拉满的冷血旗舰',price:'3299 元起'},
                    {pid:'08',img:'img/phone8.png',title:'Redmi Node 11 4G',des:'全线拉满的冷血旗舰',price:'3299 元起'},
                   ]
                }
            },

        })
        app.mount('#app')
    </script>
</body>
</html>